<template>
  <view class="container">
    <!-- 加载动画 -->
    <view v-if="loading" class="loading-screen">
      <view class="loading-content">
        <view class="ai-logo">
          <uni-icons type="spinner-cycle" size="60" color="#4a6491"></uni-icons>
        </view>
        <view class="loading-text">{{ loadingText }}</view>
        <view class="progress-container">
          <view class="progress-bar" :style="{ width: progress + '%' }"></view>
        </view>
        <view class="loading-subtext">简历生成中{{ dots }}</view>
      </view>
    </view>

    <!-- 简历内容 -->
    <view v-else class="resume-content">
      <!-- 个人信息和求职意向 -->
      <view class="header">
        <view class="header-left">
          <text class="name">{{ name }}</text>
          <text class="job-intention">{{ jobIntention }}</text>
        </view>
        <view class="header-right">
          <image class="avatar" :src="avatar"></image>
        </view>
      </view>
      <view class="contact-info">
        <text class="contact-item">{{ contactInfo[0] }}</text>
        <text class="contact-item">{{ contactInfo[1] }}</text>
      </view>

      <!-- 教育经历 -->
      <view class="section">
        <text class="section-title">{{ sectionTitles[0] }}</text>
        <view class="education-experience">
          <text class="date">{{ education.date }}</text>
          <text class="university">{{ education.university }}</text>
          <text class="major">{{ education.major }}</text>
          <text class="degree">{{ education.degree }}</text>
          <text class="description">{{ education.description1 }}</text>
          <text class="description">{{ education.description2 }}</text>
        </view>
      </view>

      <!-- 项目经历 -->
      <view class="section">
        <text class="section-title">{{ sectionTitles[1] }}</text>
        <view class="project-experience" v-for="(project, index) in projects" :key="index">
          <text :class="['project-title', index !== 0 ? 'additional-project' : '']">{{ project.title }}</text>
          <text class="project-role">{{ project.role }}</text>
          <text class="project-date">{{ project.date }}</text>
          <text class="project-desc" v-for="(desc, descIndex) in project.descriptions" :key="descIndex">{{ desc }}</text>
        </view>
      </view>

      <!-- 获奖及个人经历 -->
      <view class="section">
        <text class="section-title">{{ sectionTitles[2] }}</text>
        <view class="awards-experience">
          <view class="award-item" v-for="(award, index) in awards" :key="index">
            <text class="award-year">{{ award.year }}</text>
            <text class="award-details">{{ award.details }}</text>
          </view>
        </view>
      </view>

      <!-- 相关技能 -->
      <view class="section">
        <text class="section-title">{{ sectionTitles[3] }}</text>
        <view class="skills">
          <text class="skill" v-for="(skill, index) in skills" :key="index">{{ skill }}</text>
        </view>
      </view>

      <!-- 个人评价 -->
      <view class="section">
        <text class="section-title">{{ sectionTitles[4] }}</text>
        <text class="personal-evaluation">{{ personalEvaluation }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      loading: true,
      progress: 0,
      dots: '.',
      loadingText: '',
      targetLoadingText: 'AI正在为您生成个性化简历',
      name: '',
      jobIntention: '',
      avatar: '',
      contactInfo: ['', ''],
      sectionTitles: ['', '', '', '', ''],
      education: {
        date: '',
        university: '',
        major: '',
        degree: '',
        description1: '',
        description2: ''
      },
      projects: [
        { title: '', role: '', date: '', descriptions: ['', ''] },
        { title: '', role: '', date: '', descriptions: ['', ''] },
        { title: '', role: '', date: '', descriptions: ['', ''] }
      ],
      awards: [
        { year: '', details: '' },
        { year: '', details: '' },
        { year: '', details: '' },
        { year: '', details: '' },
        { year: '', details: '' },
        { year: '', details: '' },
        { year: '', details: '' },
        { year: '', details: '' },
        { year: '', details: '' },
        { year: '', details: '' }
      ],
      skills: ['', '', '', ''],
      personalEvaluation: '',
      targetName: '赵晶鑫',
      targetJobIntention: '求职意向：JAVA全栈开发工程师',
      targetAvatar: '/static/avatar.png',
      targetContactInfo: ['联系方式：153-8141-9224', '电子邮箱：lisiwe0114@qq.com'],
      targetSectionTitles: ['教育经历', '项目经历', '获奖及个人经历', '相关技能', '个人评价'],
      targetEducation: {
        date: '2022.09 - 2026.07',
        university: '天津电子信息职业技术学院',
        major: '计算机应用技术',
        degree: '专科',
        description1: '天津电子信息职业技术学院百荣启航工坊正式成员',
        description2: '天津市市级志愿团队天工开物志愿者服务队成员'
      },
      targetProjects: [
        {
          title: '一、参与企业级项目“大学性”的开发测试与上线',
          role: '全栈开发工程师',
          date: '2024.06-2024.12',
          descriptions: [
            '项目简介：本项目是来源于校企合作的真实大型项目，前端用uniapp手机用户端以及管理端，后端使用 springboot 开发，本项目的本质是论坛系统，主要功能有话题发布、好友社交、签到校园币等功能。',
            '项目参与：前端页面开发，难点涉及仓库、封装、功能与接口实现、WebSocket协议与数据处理；后端参与数据库与接口设计与开发，包括权限校验、业务逻辑书写、bug修改，有独立开发完整功能的经验。'
          ]
        },
        {
          title: '二、企业级项目"外卖送"APP独立开发',
          role: '全栈开发工程师',
          date: '2025.01-2025.04',
          descriptions: [
            '项目简介：本项目为大学生版的二次开发项目，软件登录具有角色校验功能，可以实现商家、骑手、用户三个角色一个软件，主要功能包括：商家接单出餐、支付，骑手接单配送和信息统计以及AI客服等功能。',
            '项目参与：本人独立完成从需求文档开发→数据库设计→前后端代码编写→软件测试的项目开发全部流程，项目难点包括登录身份校验以及身份切换、支付功能的实现以及隐私数据的管理等。'
          ]
        },
        {
          title: '三、参与企业级项目"脊柱康复"小程序后端开发',
          role: '后端开发工程师',
          date: '2025.04-2025.05',
          descriptions: [
            '项目简介：本项目为校企合作的真实企业小程序项目，后端采用芋道框架开发，管理平台采用element实现。主要功能包括：线上医生问诊、线上体质评估、专家挂号、课程报名学习、亲属人员绑定等。',
            '项目参与：本人参与该项目的设计与部分后端开发以及管理平台的开发，项目难点包括：获取微信绑定的手机号一键登录，根据定位获取当地的医生和医院，问诊数据的录入和线上回复功能等逻辑算法的实现。'
          ]
        }
      ],
      targetAwards: [
        { year: '2023', details: '全国计算机应用技能大赛决赛一等奖（国奖）' },
        { year: '2023', details: '学院奖学金一次（校奖）' },
        { year: '2024', details: '计算机JAVA二级证书（证书）' },
        { year: '2024', details: '信息网络竞赛一等奖（国奖）' },
        { year: '2024', details: '天津市优秀志愿者多次（市奖）' },
        { year: '2024', details: '学院优秀学生干部奖学金（校奖）' },
        { year: '2024', details: '1+X全栈开发者证书（证书）' },
        { year: '2024', details: 'CSDN2024年度博客之星（证书）' },
        { year: '2025', details: '全国大学生人工智能知识竞赛一等奖（国奖）' },
        { year: '2025', details: '学院优秀学生干部奖学金（校奖）' }
      ],
      targetSkills: [
        '熟练使用html、css、js进行页面开发，使用vue.js、uniapp进行开发，对 React Native有一定了解。',
        '熟悉SpringBoot等框架，熟练使用ruoyi或yudao进行开发。掌握Java基础知识，如异常处理、集合。',
        '熟练使用MySQL、Redis进行开发，熟悉MySQL的索引原理、锁、事务，熟悉基本的Linux命令熟练。',
        '熟悉Servlet、Git、Maven、tomcat等功能，熟悉mybatis、mybatis Plus，熟悉JDBC简化数据库操作。'
      ],
      targetPersonalEvaluation: '从小热爱计算机，从中学开始接触编程，大学多次努力破解某网络游戏外挂，被好友称为"疯狂程序猿"。痴迷博客平台和代码分享，本人是CSDN初级创作者有1700+粉丝，6万+阅读量，900+点赞和三年码龄。'
    };
  },
  onLoad() {
    // 显示加载动画
    uni.showLoading({
      title: '简历生成中...',
      mask: true
    });
    
    // 模拟加载进度
    const progressInterval = setInterval(() => {
      if (this.progress < 100) {
        this.progress += 5;
      }
    }, 100);
    
    // 加载动画点
    const dotsInterval = setInterval(() => {
      this.dots = this.dots.length < 3 ? this.dots + '.' : '.';
    }, 500);
    
    // 渐显显示加载文本
    this.animateTypewriter(this.targetLoadingText, 'loadingText', 150);
    
    // 2秒后完成加载
    setTimeout(() => {
      clearInterval(progressInterval);
      clearInterval(dotsInterval);
      this.loading = false;
      uni.hideLoading();
      
      // 逐步显示个人信息
      this.animateTypewriter(this.targetName, 'name', 100);
      this.animateTypewriter(this.targetJobIntention, 'jobIntention', 100);
      this.animateTypewriter(this.targetAvatar, 'avatar', 100);
      this.animateTypewriter(this.targetContactInfo[0], 'contactInfo', 100, 0);
      this.animateTypewriter(this.targetContactInfo[1], 'contactInfo', 100, 1);
      
      // 逐步显示各部分标题
      setTimeout(() => this.animateTypewriter(this.targetSectionTitles[0], 'sectionTitles', 100, 0), 300);
      setTimeout(() => this.animateTypewriter(this.targetSectionTitles[1], 'sectionTitles', 100, 1), 600);
      setTimeout(() => this.animateTypewriter(this.targetSectionTitles[2], 'sectionTitles', 100, 2), 900);
      setTimeout(() => this.animateTypewriter(this.targetSectionTitles[3], 'sectionTitles', 100, 3), 1200);
      setTimeout(() => this.animateTypewriter(this.targetSectionTitles[4], 'sectionTitles', 100, 4), 1500);
      
      // 逐步显示教育背景
      setTimeout(() => this.animateTypewriter(this.targetEducation.date, 'education', 100, 'date'), 1800);
      setTimeout(() => this.animateTypewriter(this.targetEducation.university, 'education', 100, 'university'), 2100);
      setTimeout(() => this.animateTypewriter(this.targetEducation.major, 'education', 100, 'major'), 2400);
      setTimeout(() => this.animateTypewriter(this.targetEducation.degree, 'education', 100, 'degree'), 2700);
      setTimeout(() => this.animateTypewriter(this.targetEducation.description1, 'education', 100, 'description1'), 3000);
      setTimeout(() => this.animateTypewriter(this.targetEducation.description2, 'education', 100, 'description2'), 3300);
      
      // 逐步显示项目经历
      for (let i = 0; i < this.targetProjects.length; i++) {
        setTimeout(() => this.animateTypewriter(this.targetProjects[i].title, 'projects', 100, i, 'title'), 3600 + i * 600);
        setTimeout(() => this.animateTypewriter(this.targetProjects[i].role, 'projects', 100, i, 'role'), 3900 + i * 600);
        setTimeout(() => this.animateTypewriter(this.targetProjects[i].date, 'projects', 100, i, 'date'), 4200 + i * 600);
        for (let j = 0; j < this.targetProjects[i].descriptions.length; j++) {
          setTimeout(() => this.animateTypewriter(this.targetProjects[i].descriptions[j], 'projects', 100, i, 'descriptions', j), 4500 + i * 600 + j * 300);
        }
      }
      
      // 逐步显示获奖及个人经历
      for (let i = 0; i < this.targetAwards.length; i++) {
        setTimeout(() => this.animateTypewriter(this.targetAwards[i].year, 'awards', 100, i, 'year'), 6000 + i * 300);
        setTimeout(() => this.animateTypewriter(this.targetAwards[i].details, 'awards', 100, i, 'details'), 6300 + i * 300);
      }
      
      // 逐步显示相关技能
      for (let i = 0; i < this.targetSkills.length; i++) {
        setTimeout(() => this.animateTypewriter(this.targetSkills[i], 'skills', 100, i), 8000 + i * 300);
      }
      
      // 逐步显示个人评价
      setTimeout(() => this.animateTypewriter(this.targetPersonalEvaluation, 'personalEvaluation', 100), 9500);
    }, 2000);
  },
  methods: {
    animateTypewriter(targetText, arrayName, speed, index = 0, property = '', descIndex = 0) {
      let currentText = '';
      const vm = this;
      
      const interval = setInterval(() => {
        if (currentText.length < targetText.length) {
          currentText += targetText.charAt(currentText.length);
          
          if (property && descIndex >= 0) {
            vm[arrayName][index][property][descIndex] = currentText;
          } else if (property) {
            vm[arrayName][index][property] = currentText;
          } else if (index >= 0) {
            vm[arrayName][index] = currentText;
          } else {
            vm[arrayName] = currentText;
          }
        } else {
          clearInterval(interval);
        }
      }, speed);
    }
  }
};
</script>

<style>
.container {
  font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  background-color: #f5f5f5;
  color: #333;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 100;
}

.loading-content {
  text-align: center;
  width: 80%;
  max-width: 500px;
  padding: 20px;
}

.ai-logo {
  margin-bottom: 30px;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-15px); }
  100% { transform: translateY(0px); }
}

.progress-container {
  width: 100%;
  height: 12px;
  background: #e0e0e0;
  border-radius: 10px;
  margin: 30px 0;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(to right, #4a6491, #2c3e50);
  border-radius: 10px;
  transition: width 0.3s ease;
}

.loading-text {
  font-size: 1.5rem;
  color: #2c3e50;
  font-weight: 600;
  margin-bottom: 10px;
}

.loading-subtext {
  font-size: 1rem;
  color: #666;
  margin-top: 10px;
}

/* 个人信息和求职意向 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header-left {
  display: flex;
  flex-direction: column;
}

.name {
  font-size: 24px;
  font-weight: bold;
  color: #4a6491;
}

.job-intention {
  font-size: 16px;
  color: #4a6491;
}

.avatar {
  width: 120px;
  height: 160px;
  border-radius: 5px;
  object-fit: cover;
}

.contact-info {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
}

.contact-item {
  margin-bottom: 5px;
  font-size: 14px;
}

.section {
  margin-bottom: 30px;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #4a6491;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 5px;
}

/* 教育经历样式 */
.education-experience {
  margin-bottom: 20px;
}

.date {
  font-weight: bold;
}

.university, .major, .degree {
  font-weight: bold;
  margin-right: 10px;
}

.description {
  margin-bottom: 5px;
  font-size: 14px;
  color: #555;
}

/* 项目经历样式 */
.project-experience {
  margin-bottom: 20px;
}

.project-title {
  font-size: 16px;
  font-weight: bold;
  color: #4a6491;
}

.additional-project {
  margin-top: 15px;
}

.project-role {
  font-size: 14px;
  color: #666;
}

.project-date {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
}

.project-desc {
  margin-bottom: 5px;
  font-size: 14px;
  color: #555;
}

/* 获奖及个人经历样式 */
.awards-experience {
  display: flex;
  flex-wrap: wrap;
}

.award-item {
  width: 50%;
  margin-bottom: 10px;
}

.award-year {
  font-weight: bold;
  margin-right: 10px;
}

.award-details {
  font-size: 14px;
}

/* 相关技能样式 */
.skills {
  display: flex;
  flex-direction: column;
}

.skill {
  margin-bottom: 10px;
  font-size: 14px;
  color: #555;
}

/* 个人评价样式 */
.personal-evaluation {
  font-size: 14px;
  line-height: 1.6;
  color: #555;
  text-align: center;
}
</style>